/**
 * Email OTP before WooCommerce account registration (My Account, checkout, header modal).
 */
(function () {
  'use strict';

  var cfg = window.travelgoRegOtp;
  if (!cfg || !cfg.restUrl) {
    return;
  }

  function msg(el, text, isError) {
    if (!el) {
      return;
    }
    el.hidden = !text;
    el.textContent = text || '';
    el.classList.toggle('is-error', !!isError);
  }

  function post(path, body) {
    var payload = Object.assign({}, body || {}, { travelgo_nonce: cfg.nonce });
    return fetch(cfg.restUrl.replace(/\/?$/, '/') + path.replace(/^\//, ''), {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    }).then(function (r) {
      return r.json().then(function (data) {
        if (!r.ok) {
          throw new Error((data && data.message) || cfg.strings.error);
        }
        return data;
      });
    });
  }

  function getEmail(wrap) {
    var id = wrap.getAttribute('data-travelgo-email-field') || 'reg_email';
    var el = document.getElementById(id);
    return el ? el.value.trim() : '';
  }

  function clearToken(wrap) {
    var hid = wrap.querySelector('input[name="travelgo_reg_token"]');
    if (hid) {
      hid.value = '';
    }
  }

  function bindWrap(wrap) {
    var suffix = wrap.id.replace('travelgo-reg-otp-wrap', '');
    var sendBtn = document.getElementById('travelgo-reg-send' + suffix);
    var verifyBtn = document.getElementById('travelgo-reg-verify' + suffix);
    var codeEl = document.getElementById('travelgo-reg-code' + suffix);
    var statusEl = document.getElementById('travelgo-reg-status' + suffix);
    var tokenEl = wrap.querySelector('input[name="travelgo_reg_token"]');
    var emailFieldId = wrap.getAttribute('data-travelgo-email-field') || 'reg_email';
    var emailEl = document.getElementById(emailFieldId);

    if (sendBtn) {
      sendBtn.addEventListener('click', function () {
        msg(statusEl, '', false);
        var email = getEmail(wrap);
        if (!email) {
          msg(statusEl, cfg.strings.needEmail, true);
          return;
        }
        clearToken(wrap);
        post('auth/otp/request', { email: email, for_registration: true })
          .then(function (data) {
            msg(statusEl, (data && data.message) || cfg.strings.otpSent, false);
          })
          .catch(function (e) {
            msg(statusEl, e.message || cfg.strings.error, true);
          });
      });
    }

    if (verifyBtn && codeEl) {
      verifyBtn.addEventListener('click', function () {
        msg(statusEl, cfg.strings.working, false);
        var email = getEmail(wrap);
        if (!email) {
          msg(statusEl, cfg.strings.needEmail, true);
          return;
        }
        post('auth/otp/verify-registration', {
          email: email,
          code: codeEl.value.trim(),
        })
          .then(function (data) {
            if (tokenEl && data.regToken) {
              tokenEl.value = data.regToken;
            }
            msg(statusEl, (data && data.message) || cfg.strings.verified, false);
          })
          .catch(function (e) {
            clearToken(wrap);
            msg(statusEl, e.message || cfg.strings.error, true);
          });
      });
    }

    if (emailEl) {
      emailEl.addEventListener(
        'input',
        function () {
          clearToken(wrap);
          msg(statusEl, '', false);
        },
        { passive: true }
      );
    }

    if (suffix === '-checkout' || suffix === '-modal') {
      var createCb = document.getElementById('createaccount');
      if (createCb) {
        var syncOtpVisibility = function () {
          if (createCb.checked) {
            wrap.removeAttribute('hidden');
            wrap.style.display = '';
          } else {
            wrap.setAttribute('hidden', '');
            wrap.style.display = 'none';
            clearToken(wrap);
            msg(statusEl, '', false);
          }
        };
        createCb.addEventListener('change', syncOtpVisibility);
        syncOtpVisibility();
      }
    }
  }

  function boot() {
    document.querySelectorAll('.travelgo-reg-otp').forEach(bindWrap);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot);
  } else {
    boot();
  }
})();